<template>
  <!--        要为地图指定容器，否则会不显示-->
  <div class="map container" id="container">
    <!--    <el-amap vid="amap" :plugin="plugin" class="map" :center="center">-->
    <!--    </el-amap>-->
<!--    <div class="toolbar">-->
<!--        <span v-if="loaded" class="el-icon-location-outline">-->
<!--          当前位置: {{ Location }}-->
<!--        </span>-->
<!--      <span v-else>正在定位</span>-->
<!--      &lt;!&ndash;       <el-button v-on:click="req_post()"> 查询周边</el-button>&ndash;&gt;-->
<!--    </div>-->
  </div>
</template>
<style>
/*地图*/
.map {
  width: 100%;
  height: 100%;
}
</style>
<script>

import AMap from 'AMap'

export default {
  data() {
    return {
      UN: this.$route.params.UN,
      //  地图类
      resizeEnable: true,
      expandZoomRange: true,
      zoom: 20,
      zooms: [3, 20],
      City: '',//城市
      // Location: '',//当前位置
      loaded: false,
    }

  },
  watch: {//监听数据发生变化
  },
  mounted() { //初始化
    // this.getLocation()
    this.GetWeather()
  },
  methods: {
// 获取当前位置
    getLocation() {
      let $self = this;
      return new Promise((resolve, reject) => {
        var map = new AMap.Map('container');
        AMap.plugin([
          'AMap.Geolocation', 'AMap.ToolBar',
          'AMap.Scale',
          'AMap.OverView',
          'AMap.Weather',
          'AMap.MapType',], () => {
          var geolocation = new AMap.Geolocation({
            resizeEnable: true,
            expandZoomRange: true,
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 100,          //超过10秒后停止定位，默认：无穷大
            maximumAge: 0,           //定位结果缓存0毫秒，默认：0
            convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
            showButton: true,        //显示定位按钮，默认：true
            buttonPosition: 'RB',    //定位按钮停靠位置，默认：'LB'，左下角
            showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
            showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
            panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
            zoomToAccuracy: true,//定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
            extensions: 'all',
            radius: 100,
            zoom: 20,
            zooms: [3, 20],
          });
          // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
          map.addControl(new AMap.ToolBar());
          // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
          map.addControl(new AMap.Scale());
          // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
          map.addControl(new AMap.OverView({isOpen: true}));
          // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
          map.addControl(new AMap.MapType());
          // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
          map.addControl(geolocation);
          geolocation.getCurrentPosition();
          AMap.event.addListener(geolocation, 'complete', onComplete);
          AMap.event.addListener(geolocation, 'error', onError);

          function onComplete(data) {
            $self.loaded = true
            // data是具体的定位信息
            console.log('定位成功信息：', data);
            $self.Location = data.formattedAddress;
            const location={
              flag:$self.loaded,
              location:data.formattedAddress
            }
             //父子组件传值
            $self.$parent.$parent.$parent.$parent.GetLocation(location)
            console.log($self.Location)
            //获取城市
            this.City = data.addressComponent.city
            resolve(this.City)//异步处理返回，相当于return
          }
          function onError(data) {
            // 定位出错
                       self.$message({
              message: '哎呀，定位失败啦',
              type: 'warning',
              duration: 1500
            });
            // 调用IP定位
            this.getLngLatLocation();
          }
        });
      })
    },
    async GetWeather() { //获取天气
      /*
      异步处理，先获取当前位置，之后根据当前位置获取天气信息
       */
      // 获取天气
      let self = this
      let city = await this.getLocation()
      //加载天气查询插件
      AMap.plugin('AMap.Weather', function () {
        //创建天气查询实例
        var weather = new AMap.Weather();
        console.log(city)
        //执行实时天气信息查询
        weather.getLive(city, function (err, data) {
          if (data.info === 'OK') {
            const weatherinfo = {
              city: data.city,
              humidity: data.humidity,
              temperature: data.temperature,
              weather: data.weather,
              windDirection: data.windDirection,
              windPower: data.windPower
            }
            //父子组件传值
            self.$parent.$parent.$parent.$parent.GetValue(weatherinfo)
            // self.$message({
            //   message: '获取天气成功',
            //   type: 'success',
            //   duration: 1500
            // });
          } else {
            self.$message({
              message: '哎呀，获取天气失败啦',
              type: 'warning',
              duration: 1500
            });

          }
        });
      });
    },
    // 通过IP获取当前位置
    getLngLatLocation() {
      AMap.plugin('AMap.CitySearch', function () {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity(function (status, result) {
          if (status === 'complete' && result.info === 'OK') {
            // 查询成功，result即为当前所在城市信息
            console.log('通过ip获取当前城市：', result);
            // 逆向地理编码
            AMap.plugin('AMap.Geocoder', function () {
              var geocoder = new AMap.Geocoder({
                // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                city: result.adcode
              });

              var lnglat = result.rectangle.split(';')[0].split(',');
              geocoder.getAddress(lnglat, function (status, data) {
                if (status === 'complete' && data.info === 'OK') {
                  // result为对应的地理位置详细信息
                  console.log(data);
                }
              });
            });
          }
        });
      });
    }
  }
}
</script>
